<template>
  <div id="skill_manage">
    <div class="plant_list_form">
      <el-form
        :inline="true"
        :model="formInline"
        label-width="60px"
        class="demo-form-inline"
      >
        <el-form-item label="">
          <el-input v-model="formInline.title" style="width: 200px;" placeholder="名称" />
        </el-form-item>
        <el-form-item label="类型：">
          <el-select v-model="formInline.type_info" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.auxiliary_knowledge_class"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="pull-left" type="primary" @click="getList">查询</el-button>
          <el-button v-permission="['管理者']" class="pull-left" type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="plant_list_table">
      <el-table :data="tableData" :show-overflow-tooltip="true" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="type_info" label="类型" />
        <el-table-column prop="title" label="标题" />
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="goDetail(scope.row.id)">查看</el-button> -->
            <el-button v-permission="['管理者']" type="text" size="small" @click="goEdit(scope.row.id)">编辑</el-button>
            <el-popconfirm
              title="是否确定删除此信息？"
              confirm-button-text="确 认"
              cancel-button-text="取 消"
              @onConfirm="deleteRow(scope.row.id)"
            >
              <el-button slot="reference" v-permission="['管理者']" style="color:#FF4D4F;margin-left: 8px;" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="currentPage"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { auxiliaryQuery, deleteList } from '@/api/plantList'
import { options } from '@/api/question'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 1,
      formInline: {
        title: '',
        type_info: '',
        military_medical_class: '',
        traditional_efficacy_class: '',
        disease_name_class: '',
        types_of_military_applications: '',
        medicinal_parts: '',

        auxiliary_knowledge_class: []
      }
    }
  },
  mounted() {
    this.getList()
    this.getOptions()
  },
  methods: {
    async deleteRow(id) {
      const res = await deleteList(id)
      if (res.code == 200) {
        this.getList()
      }
    },
    goDetail(id) {
      this.$router.push(`/plantlib/skill/manage/edit/${id}`)
    },
    goEdit(id) {
      this.$router.push(`/plantlib/skill/manage/edit/${id}`)
    },
    async getOptions() {
      const res = await options()
      if (res.code == 200 && res.data) {
        this.formInline.auxiliary_knowledge_class = res.data.auxiliary_knowledge_class
      }
    },
    handleSizeChange(val) {
      this.currentPage = val
      this.getList()
    },
    add() {
      this.$router.push('/plantlib/skill/manage/edit/add')
    },
    async getList() {
      const conditions = []
      for (const key in this.formInline) {
        const isString = Object.prototype.toString.call(this.formInline[key]) == '[object String]'
        const value = this.formInline[key]
        if (isString && value) {
          conditions.push({
            key,
            operator: 'like',
            value
          })
        }
      }
      const data = {
        page_num: this.currentPage,
        page_size: 5,
        conditions,
        order_info: {
          key: 'create_time',
          order: 'desc'
        }
      }
      const res = await auxiliaryQuery(data)
      const code = Number(res.code)
      if (code === 200) {
        const data = res.data
        data.forEach(item => {
          item.imgs = item.whole_plant_url && item.whole_plant_url.includes(',') ? item.whole_plant_url.split(',') : [item.whole_plant_url]
        })
        this.tableData = data
        this.total = res.paging.total
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#skill_manage{
  position: relative;
  min-height: calc(100vh - 150px);
  padding-bottom: 100px;
  .describe{
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .imgs{
    text-align: center;
  }
}
</style>
<style lang="scss">
  #plant_manage .el-upload-list{
    display: none;
  }
</style>
